import React, { MouseEvent, ChangeEvent } from "react";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import { dataCompute } from "./../../redux/action";

type props = {
	value: number;
	info: string;
	onClickEvent(e: MouseEvent<HTMLElement>): void;
};

const M: React.SFC<props> = ({ onClickEvent, value, info }) => (
	<div>
		<div>
			<h1>
				<span>测试 redux 自减组件</span>
			</h1>
		</div>
		<div>
			<h3>
				<b>
					<span>数据显示</span>
				</b>
				<span>{value}</span>
			</h3>
		</div>
		<div>
			<button onClick={onClickEvent}>
				<span>点击按钮自减1</span>
			</button>
		</div>
		<div>
			<h3>
				<span>组件通知</span>
			</h3>
			<h4>
				<span>{info}</span>
			</h4>
		</div>
	</div>
);

const mapStateToProps = (state: any) => {
	return {
		value: state.dataCompute.count,
		info: state.dataCompute.info,
	};
};

const mapDispatchToProps = (dispatch: Dispatch) => {
	return {
		onClickEvent: (e: MouseEvent<HTMLElement>) => {
			dispatch(dataCompute("SUB"));
		},
	};
};

const reduxCompent = connect(mapStateToProps, mapDispatchToProps)(M);

export default reduxCompent;
